<template>
	<BaseContainer
		class="report-table-wrapper"
		v-loading="loading"
		element-loading-text="加载中..."
		element-loading-background="rgba(255, 255, 255, 0.8)"
	>
		<div class="t-header">
			<div @click="drawer = !drawer" class="article-title">
				<p
					class="text-tip"
					id="no-print"
					v-if="modelData.viewStatus"
					:style="{ opacity: modelData['viewStatus'] == null ? 0 : 1, '--base-text-bg': modelData['viewStatus'] == 1 ? '' : '#dc8844af' }"
				>
					<span class="tip-text-detail" v-if="modelData.viewStatus == 1">详</span>
					<span class="tip-text-new" v-else>新</span>
				</p>
				<span>浦口区养老机构改护理型床位审核表</span>
			</div>
		</div>
		<div class="flex align-center space-between gap-20">
			<div style="min-width: 140px">填报单位（盖章）：{{ modelData.reportingUnit }}</div>
			<div>填报时间：{{ modelData.fillingTime }}</div>
		</div>
		<ReportTable :column="dataList" :isDetail="isDetail" :baseModel="baseModel" :model="modelData" @change="handleSave">
			<template v-slot:note>
				<div class="w-100 tr flex-column">
					<p class="fc">经实地查看，以上数据真实有效。</p>
					<div class="p-r-50">
						<p>区民政局检查人签名:</p>
						<p style="padding-right: 3vw">年 月 日</p>
					</div>
				</div>
			</template>
		</ReportTable>

		<el-drawer size="75%" append-to-body v-model="drawer" :with-header="false" @close="onClose">
			<BedPage
				v-if="drawer"
				:auth="{
					index: 'view_dpOrgBedInfo_page',
				}"
				:menuBtn="[
					{
						icon: 'detail',
						label: '查看',
						operate: 'detail',
						auth: 'view_dpOrgBulidingInfo_page',
						text: true,
						show: true,
					},
				]"
				:paramsObj="{
					...model,
          isChange:1,
					creditCode: creditCode,
					roomNum: nowInfo.roomNum,
          belongBuilding: nowInfo.belongBuilding,
					belongFloor: nowInfo.floor,
					belongRoom: nowInfo.roomCode,
          idList:nowInfo.idList
				}"
			></BedPage>
		</el-drawer>
	</BaseContainer>
</template>

<script setup lang="ts">
import ReportTable from '@/views/instOperate/components/ApplyReport/components/ReportTable/index.vue'
import apiMod from '@/apiMod'
import BedPage from '@/views/elderlyInstitute/roomManagement/BedPage/index.vue'

const props = defineProps<{
	otherData?: any
	params?: any
	creditCode?: string | number
	editData?: any
	isDetail?: boolean
	caseId?: string | number
	custome?: boolean
	approvalStatus?: string | number
}>()
const emit = defineEmits(['save'])

const model = ref({
	year: '',
	month: '',
})
const drawer = ref(false)
const baseModel = shallowRef({})
const loading = ref(false)
const nowInfo = ref({
	roomNum: '',
  belongBuilding:'',
  floor:'',
	roomCode: '',
  idList:[],
})
const modelData: any = ref({})

const onClose = () => {}

const tableColumnConfig = (data?: any) => {
	if (!data) data = []
	const dataColumn = data.map((item, index) => {
		return [
			{ m: index + 1 },
			{
				m: item.roomNum,
				setColor: true,
				archives: true,
				archivesText: '查看床位',
				showLink: (col, model) => {
          nowInfo.value = item
					if(item.idList && item.idList.length>0)	drawer.value = true
				},
			},
			{ m: item.roomArea },
			{ m: item.generalCount },
			{ m: item.nursingCount },
			{ m: item.bedAvgArea },
			{
				isMore: true,
				m: item.notes,
				// prop: 'notes',
        change:(value,col)=> {
          item.notes = value
          apiMod.view_dpOrgBedInfo_editNotes({
            id:item.id,
            notes: value
          })
        }
			},
		]
	})
	return [
		[
			{
				m: '序号',
				bl: 1,
				fs: 16,
			},
			{
				m: '房间号',
				bl: 1,
				fs: 16,
			},
			{
				m: '房间面积',
				bl: 1,
				fs: 16,
			},
			{
				m: '床位数',
				smallM: '（普通型）',
				bl: 1,
				fs: 16,
			},
			{
				m: '床位数',
				smallM: '（护理型）',
				bl: 1,
				fs: 16,
			},
			{
				m: '床位平均 ',
				smallM: '使用面积（平米）',
				bl: 1,
				fs: 16,
			},
			{
				m: '备注',
				bl: 1,
				fs: 16,
			},
		],
		...dataColumn,
		[
			{
				m: '合计人数',
				prop: 'note',
				align: 'left',
				mc: {
					rs: 1,
					cs: 10,
				},
			},
		],
	]
}
const dataList = ref(tableColumnConfig())

const getInitData = async () => {
	const params = props.params || {}
	const query = {
		year: '',
		month: '',
		creditCode: props.creditCode,
		projectId: params.subsidyProjectId,
		applySource: !props.approvalStatus ? '-99' : props.approvalStatus,
    uniqueId: props.otherData?.id
	}
	if (params.belongDate) {
		query.year = params.belongDate.replace('年', '-').replace('月', '').split('-')[0]
		query.month = params.belongDate.replace('年', '-').replace('月', '').split('-')[1]
		model.value.year = query.year
		model.value.month = query.month
	} else {
		return
	}

	try {
		const condition = (props.caseId && props.isDetail) || props.custome || props.approvalStatus == -2
		loading.value = true

    modelData.value = {
			...props.editData,
			list: props.editData.list,
		}
   
    // if(props.approvalStatus ==undefined && !props.otherData?.allData) {
    if(!condition && !props.otherData?.allData) {
		  const reportData = await apiMod.view_orgBedInfoChange(query).then((res) => res.data)
		  baseModel.value = Object.freeze({ ...reportData })
      modelData.value.list =  reportData || []
    }
		loading.value = false
		if (!condition) handleSave()
		dataList.value = tableColumnConfig(modelData.value.list)
	} catch (error) {
		loading.value = false
	}
}
onMounted(() => {
	if (props.params) getInitData()
})

const handleSave = () => {
	emit('save', modelData.value, 'PK_bed_hl_report_1002', props.editData)
}

onUnmounted(() => {
	// emit(
	// 	'save',
	// 	{
	// 		...modelData.value,
	// 		dataType: 'StatisticsTable',
	// 	},
	// 	'report_1003',
	// 	props.editData
	// )
})
</script>

<style scoped lang="scss">
.report-table-wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 10px 30px;
	top: 0;

	.t-header {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		padding: 15px 0;

		.text-sm {
			font-weight: 400;
			font-size: 16px;
		}
	}
}

.article-title {
	position: relative;
	z-index: 0;
	width: 63%;
	margin: 0 auto;
}

.text-tip {
	--base-text-bg: rgb(56 176 255 / 13%);
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--base-text-bg);
	padding: 4px;
	z-index: -1;
	&:hover {
		cursor: pointer;
	}
	.tip-text-new {
		position: absolute;
		right: 0;
		top: -10px;
		color: #fff;
		border-radius: 4px;
		padding: 2px;
		width: 40px;
		background-color: #ed6d05;
	}
	.tip-text-detail {
		background-color: #179fe3;
		position: absolute;
		right: 0;
		top: -10px;
		color: #fff;
		border-radius: 4px;
		padding: 2px;
		width: 40px;
	}
}
</style>
